<template>
  <div class="camera">
    <div class="camera-title">
      实时监测摄像头
    </div>
    <div class="video-container">
      <video 
        ref="videoPlayer"
        class="video-player"
        autoplay
        loop
        muted
        controls
      >
        <source src="/test.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Camera',
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    console.log("摄像头组件已加载，播放本地视频");
    // 确保视频自动播放
    this.$nextTick(() => {
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.play().catch(error => {
          console.log("视频自动播放被阻止:", error);
        });
      }
    });
  },
  beforeUnmount() {
    // 清理视频资源
    if (this.$refs.videoPlayer) {
      this.$refs.videoPlayer.pause();
      this.$refs.videoPlayer.src = '';
    }
  },
};
</script>

<style scoped>
.camera {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.camera-title {
  padding: 10px;
  font-size: 18px;
  color: #2990ff;
  font-weight: bold;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.video-container {
  flex: 1;
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
</style>
